package com.feeyo.groundservice.composewidget.view.tab

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import com.blankj.utilcode.util.ScreenUtils
import com.feeyo.groundservice.composewidget.R
import com.feeyo.groundservice.composewidget.util.dimenToDp
import com.feeyo.groundservice.composewidget.util.dimenToSp
import com.feeyo.groundservice.composewidget.util.dpToPx
import com.feeyo.groundservice.composewidget.util.intervalClick
import com.feeyo.groundservice.composewidget.util.pxToSp
import com.feeyo.groundservice.composewidget.util.toComposeColor
import com.feeyo.groundservice.composewidget.view.util.HorizontalSpace
import com.feeyo.groundservice.composewidget.view.util.VerticalSpace
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch

/**
 *作者：70893 on 2025-03-27
 *描述：
 */


data class TabRowItem(
    val title: String,
    val count: MutableState<Int>? = null,
    var index: Int = 0,
    val screen: @Composable () -> Unit = {}
)

enum class TabCountPosition {
    LEFT, TOP, END, BOTTOM
}

/**
 * 开关按钮
 * @param open 开关状态
 * @param bottomWidth 底部宽度
 * @param bottomHeight 底部高度
 * @param bottomOpenBgColor 底部开背景色
 * @param bottomCloseBgColor 底部关背景色
 * @param bottomCornerRadius 底部圆角
 * @param bottomBorderOpen 底部是否有边框
 * @param bottomBorderWidth 底部边框宽度
 * @param bottomBorderOpenColor 底部开边框颜色
 * @param bottomBorderCloseColor 底部关边框颜色
 *
 * @param openText 开关打开文字
 * @param openTextColor 开关打开文字颜色
 * @param openTextSize 开关打开文字大小
 * @param closeText 关闭文字
 * @param closeTextColor 关闭文字颜色
 * @param closeTextSize 关闭文字大小
 *
 * @param padding 内边距
 *
 * @param slideBarWidth 滑块的宽度
 * @param slideBarHeight 滑块的高度
 * @param slideBarOpenBgColor 滑块开背景色
 * @param slideBarCloseBgColor 滑块关背景色
 * @param slideBarCornerRadius 滑块圆角
 * @param slideBarBorderOpen 滑块开边框
 * @param slideBarBorderWidth 滑块边框宽度
 * @param slideBarBorderCloseColor 滑块关边框颜色
 * @param slideBarBorderCloseColor 滑块关边框颜色
 * **/

@Composable
fun SwitchButton(
    open: Boolean = false,
    onSwitch: (open: Boolean) -> Unit,
    bottomWidth: Dp = R.dimen.d100.dimenToDp(),
    bottomHeight: Dp = R.dimen.d40.dimenToDp(),

    bottomOpenBgColor: Color = R.color.green_1FBB7D.toComposeColor(),
    bottomCloseBgColor: Color = R.color.gray_D4.toComposeColor(),
    bottomCornerRadius: Dp = R.dimen.d20.dimenToDp(),

    bottomBorderOpen: Boolean = false,

    bottomBorderWidth: Dp = R.dimen.d1.dimenToDp(),
    bottomBorderOpenColor: Color = bottomOpenBgColor,
    bottomBorderCloseColor: Color = bottomCloseBgColor,

    openText: String = "开",
    openTextColor: Color = R.color.white.toComposeColor(),
    openTextSize: TextUnit = R.dimen.d14.dimenToSp(),

    closeText: String = "关",
    closeTextColor: Color = R.color.white.toComposeColor(),
    closeTextSize: TextUnit = R.dimen.d14.dimenToSp(),

    padding: Dp = R.dimen.d0.dimenToDp(),

    slideBarWidth: Dp = (bottomWidth - padding * 2) / 2,
    slideBarHeight: Dp = (bottomHeight - padding * 2),

    slideBarOpenBgColor: Color = R.color.white.toComposeColor(),
    slideBarCloseBgColor: Color = R.color.white.toComposeColor(),
    slideBarCornerRadius: Dp = slideBarHeight / 2,

    slideBarBorderOpen: Boolean = false,

    slideBarBorderWidth: Dp = R.dimen.d1.dimenToDp(),
    slideBarBorderOpenColor: Color = slideBarOpenBgColor,
    slideBarBorderCloseColor: Color = slideBarCloseBgColor,
) {
    val openStatus = remember(open) { mutableStateOf(open) }
    val bottomBgColor = animateColorAsState(
        targetValue = if (openStatus.value) bottomOpenBgColor else bottomCloseBgColor,
        label = "bottomColor"
    )
    val bottomBorderColor = animateColorAsState(
        targetValue = if (openStatus.value) bottomBorderOpenColor else bottomBorderCloseColor,
        label = "bottomBorderColor"
    )
    val gap = bottomWidth - padding * 2 - slideBarWidth * 2


    Box(
        modifier = Modifier.width(bottomWidth).height(bottomHeight)
            .background(
                color = bottomBgColor.value,
                shape = RoundedCornerShape(bottomCornerRadius)
            ).let {
                if (bottomBorderOpen) {
                    it.border(
                        width = bottomBorderWidth,
                        color = bottomBorderColor.value,
                        shape = RoundedCornerShape(bottomCornerRadius)
                    )
                } else {
                    it
                }
            }
            .padding(padding)
    ) {

        //文字
        Row(
            modifier = Modifier.fillMaxSize()
                .intervalClick(200) {
                    openStatus.value = !openStatus.value
                    onSwitch(openStatus.value)
                }) {

            //开
            Box(
                modifier = Modifier.weight(1f).fillMaxHeight(),
                contentAlignment = Alignment.Center
            ) {
                if (openStatus.value) {
                    Text(
                        text = openText,
                        color = openTextColor,
                        fontSize = openTextSize,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }

            //关
            Box(
                modifier = Modifier.weight(1f).fillMaxHeight(),
                contentAlignment = Alignment.Center
            ) {
                if (!openStatus.value) {
                    Text(
                        text = closeText,
                        color = closeTextColor,
                        fontSize = closeTextSize,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }
        }

        //变动的圆形背景块
        val offsetX = animateDpAsState(
            targetValue = if (openStatus.value)
                slideBarWidth + gap
            else
                0.dp,
            label = "offsetX"
        )
        val slideBarBgColor = animateColorAsState(
            targetValue = if (openStatus.value)
                slideBarOpenBgColor
            else
                slideBarCloseBgColor,
            label = "slideBarBgColor"
        )
        val slideBarBorderColor = animateColorAsState(
            targetValue = if (openStatus.value)
                slideBarBorderOpenColor
            else
                slideBarBorderCloseColor,
            label = "slideBarBorderColor"
        )
        Box(
            modifier = Modifier.width(slideBarWidth)
                .height(slideBarHeight)
                .offset(x = offsetX.value)
                .background(
                    color = slideBarBgColor.value,
                    shape = RoundedCornerShape(slideBarCornerRadius)
                ).let {
                    if (slideBarBorderOpen) {
                        it.border(
                            width = slideBarBorderWidth,
                            color = slideBarBorderColor.value,
                            shape = RoundedCornerShape(slideBarCornerRadius)
                        )
                    } else {
                        it
                    }
                }
        )
    }
}


/**
 * Tab切换组件
 * @param tabRowItems Tab切换项
 * @param defaultIndex 默认选中项
 * @param bottomWidth 底部宽度
 * @param bottomHeight 底部高度
 * @param bottomBgColor 底部背景色
 * @param bottomCornerRadius 底部圆角
 * @param bottomBorderOpen 底部是否有边框
 * @param bottomBorderWidth 底部边框宽度
 * @param bottomBorderColor 底部边框颜色
 *
 * @param selectedTextColor 选中文字颜色
 * @param selectedTextSize 选中文字大小
 * @param unSelectedTextColor 未选中文字颜色
 * @param unSelectedTextSize 未选中文字大小
 *
 * @param padding 内边距
 * @param tabCountDirection 数字显示位置
 * @param isShowZero 是否显示0
 *
 * @param slideBarWidth 滑块的宽度
 * @param slideBarHeight 滑块的高度
 * @param slideBarGapWidth
 * @param slideBarBgColor 滑块背景色
 * @param slideBarCornerRadius 滑块圆角
 * @param slideBarBorderOpen 滑块开边框
 * @param slideBarBorderWidth 滑块边框宽度
 * @param slideBarBorderColor 滑块边框颜色
 * **/

@Composable
fun SwitchTab(
    tabRowItems: List<TabRowItem>,
    onSelectIndex: (index: Int) -> Unit,
    defaultIndex: Int = 0,
    bottomHeight: Dp = R.dimen.d40.dimenToDp(),
    bottomBgColor: Color = R.color.gray_D4.toComposeColor(),
    bottomCornerRadius: Dp = bottomHeight / 2,
    bottomBorderOpen: Boolean = false,
    bottomBorderWidth: Dp = R.dimen.d1.dimenToDp(),
    bottomBorderColor: Color = bottomBgColor,

    selectedTextColor: Color = R.color.white.toComposeColor(),
    selectedTextSize: Dp = R.dimen.d14.dimenToDp(),
    selectedFontWeight: FontWeight = FontWeight.W400,
    unSelectedTextColor: Color = R.color.black_66.toComposeColor(),
    unSelectedTextSize: Dp = selectedTextSize,
    unSelectedFontWeight: FontWeight = FontWeight.W400,

    padding: Dp = R.dimen.d0.dimenToDp(),
    tabCountDirection: TabCountPosition = TabCountPosition.END,
    isShowZero: Boolean = true,

    slideBarWidth: Dp = R.dimen.d50.dimenToDp(),
    slideBarHeight: Dp = (bottomHeight - padding * 2),
    slideBarGapWidth: Dp = 0.dp,
    slideBarBgColor: Color = R.color.blue_2E76EE.toComposeColor(),
    slideBarCornerRadius: Dp = slideBarHeight / 2,

    slideBarBorderOpen: Boolean = false,
    slideBarBorderWidth: Dp = R.dimen.d1.dimenToDp(),
    slideBarBorderColor: Color = slideBarBgColor,
    onPerformClick: ((Int) -> Unit) -> Unit = {}//外部模拟点击使用
) {

    if (defaultIndex >= tabRowItems.size)
        throw Throwable("your defaultIndex $defaultIndex,tab count is ${tabRowItems.size}")

    val currentIndex = remember { mutableIntStateOf(defaultIndex) }
    val bottomWidth =
        slideBarWidth * tabRowItems.size + slideBarGapWidth * (tabRowItems.size - 1) + padding * 2

    //回调给外部
    val performClick: (Int) -> Unit = {
        currentIndex.intValue = it
        onSelectIndex(it)
    }
    onPerformClick(performClick)

    Box(
        modifier = Modifier.width(bottomWidth).height(bottomHeight)
            .background(
                color = bottomBgColor,
                shape = RoundedCornerShape(bottomCornerRadius)
            ).let {
                if (bottomBorderOpen) {
                    it.border(
                        width = bottomBorderWidth,
                        color = bottomBorderColor,
                        shape = RoundedCornerShape(bottomCornerRadius)
                    )
                } else {
                    it
                }
            }
            .padding(padding),
        contentAlignment = Alignment.CenterStart
    ) {

        //分情况
        if (bottomWidth.dpToPx() > ScreenUtils.getScreenWidth()) {//超宽

            val scrollState = rememberScrollState()
            //文字
            Row(
                modifier = Modifier.fillMaxSize().horizontalScroll(scrollState),
                verticalAlignment = Alignment.CenterVertically
            ) {

                tabRowItems.forEachIndexed { index, item ->
                    val textColor = animateColorAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextColor
                        else
                            unSelectedTextColor,
                        label = "textColor"
                    )
                    val textSize = animateDpAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextSize
                        else
                            unSelectedTextSize,
                        label = "textSize"
                    ).value.dpToPx()

                    val fontWeight = if (currentIndex.intValue == index)
                        selectedFontWeight
                    else
                        unSelectedFontWeight

                    val selected = currentIndex.intValue == index

                    Box(
                        modifier = Modifier.width(slideBarWidth).fillMaxHeight()
                            .background(
                                color = if (selected) slideBarBgColor else R.color.transparent.toComposeColor(),
                                shape = RoundedCornerShape(slideBarCornerRadius)
                            ).let {
                                //必须使用let进行处理
                                if (slideBarBorderOpen) {
                                    it.border(
                                        width = slideBarBorderWidth,
                                        color = if (selected) slideBarBorderColor else R.color.transparent.toComposeColor(),
                                        shape = RoundedCornerShape(slideBarCornerRadius)
                                    )
                                } else {
                                    it
                                }
                            }
                            .intervalClick(200) {
                                currentIndex.intValue = index
                                onSelectIndex(index)
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        val msg = item.count?.value?.let {

                            if (it > 0)
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> "$it ${item.title}"
                                    TabCountPosition.TOP -> "$it\n${item.title}"
                                    TabCountPosition.END -> "${item.title} $it"
                                    TabCountPosition.BOTTOM -> "${item.title}\n$it"
                                }
                            else {
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> if (isShowZero) "$it ${item.title}" else item.title
                                    TabCountPosition.TOP -> if (isShowZero) "$it\n${item.title}" else "\n${item.title}"
                                    TabCountPosition.END -> if (isShowZero) "${item.title} $it" else item.title
                                    TabCountPosition.BOTTOM -> if (isShowZero) "${item.title}\n$it" else "${item.title}\n"
                                }
                            }
                        } ?: item.title
                        Text(
                            text = msg,
                            color = textColor.value,
                            fontSize = textSize.pxToSp(),
                            fontWeight = fontWeight,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis,
                            textAlign = TextAlign.Center
                        )
                    }

                    //加间隔
                    if (index < tabRowItems.size - 1) {
                        HorizontalSpace(slideBarGapWidth)
                    }
                }
            }
        } else {//不超宽
            //变动的圆形背景块
            val offsetX = animateDpAsState(
                targetValue = (slideBarWidth + slideBarGapWidth) * currentIndex.intValue,
                label = "offsetX"
            )

            Box(
                modifier = Modifier.width(slideBarWidth)
                    .height(slideBarHeight)
                    .offset(x = offsetX.value)
                    .background(
                        color = slideBarBgColor,
                        shape = RoundedCornerShape(slideBarCornerRadius)
                    ).let {
                        //必须使用let进行处理
                        if (slideBarBorderOpen) {
                            it.border(
                                width = slideBarBorderWidth,
                                color = slideBarBorderColor,
                                shape = RoundedCornerShape(slideBarCornerRadius)
                            )
                        } else {
                            it
                        }
                    }
            )

            //文字
            Row(
                modifier = Modifier.fillMaxSize(),
            ) {

                tabRowItems.forEachIndexed { index, item ->
                    val textColor = animateColorAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextColor
                        else
                            unSelectedTextColor,
                        label = "textColor"
                    )
                    val textSize = animateDpAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextSize
                        else
                            unSelectedTextSize,
                        label = "textSize"
                    ).value.dpToPx()

                    val fontWeight = if (currentIndex.intValue == index)
                        selectedFontWeight
                    else
                        unSelectedFontWeight

                    Box(
                        modifier = Modifier.width(slideBarWidth).fillMaxHeight()
                            .intervalClick(200) {
                                currentIndex.intValue = index
                                onSelectIndex(index)
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        val msg = item.count?.value?.let {

                            if (it > 0)
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> "$it ${item.title}"
                                    TabCountPosition.TOP -> "$it\n${item.title}"
                                    TabCountPosition.END -> "${item.title} $it"
                                    TabCountPosition.BOTTOM -> "${item.title}\n$it"
                                }
                            else {
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> if (isShowZero) "$it ${item.title}" else item.title
                                    TabCountPosition.TOP -> if (isShowZero) "$it\n${item.title}" else "\n${item.title}"
                                    TabCountPosition.END -> if (isShowZero) "${item.title} $it" else item.title
                                    TabCountPosition.BOTTOM -> if (isShowZero) "${item.title}\n$it" else "${item.title}\n"
                                }
                            }
                        } ?: item.title
                        Text(
                            text = msg,
                            color = textColor.value,
                            fontSize = textSize.pxToSp(),
                            fontWeight = fontWeight,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis,
                            textAlign = TextAlign.Center
                        )
                    }

                    //加间隔
                    if (index < tabRowItems.size - 1) {
                        HorizontalSpace(slideBarGapWidth)
                    }
                }
            }
        }


    }

    //外部默认defaultIndex变化，修改位置,如果定义回调函数了 就不需要使用了这种方式了
    LaunchedEffect(defaultIndex) {
        currentIndex.intValue = defaultIndex
    }
}


/**
 * 垂直Tab切换组件
 * @param tabRowItems Tab切换项
 * @param defaultIndex 默认选中项
 * @param bottomWidth 底部宽度
 * @param bottomBgColor 底部背景色
 * @param bottomCornerRadius 底部圆角
 * @param bottomBorderOpen 底部是否有边框
 * @param bottomBorderWidth 底部边框宽度
 * @param bottomBorderColor 底部边框颜色
 *
 * @param selectedTextColor 选中文字颜色
 * @param selectedTextSize 选中文字大小
 * @param unSelectedTextColor 未选中文字颜色
 * @param unSelectedTextSize 未选中文字大小
 *
 * @param padding 内边距
 * @param tabCountDirection 数字显示位置
 * @param isShowZero 是否显示0
 *
 * @param slideBarWidth 滑块的宽度
 * @param slideBarHeight 滑块的高度
 * @param slideBarGapHeight 滑块间隔高度
 * @param slideBarBgColor 滑块背景色
 * @param slideBarCornerRadius 滑块圆角
 * @param slideBarBorderOpen 滑块开边框
 * @param slideBarBorderWidth 滑块边框宽度
 * @param slideBarBorderColor 滑块边框颜色
 * **/

@Composable
fun SwitchVerticalTab(
    tabRowItems: List<TabRowItem>,
    onSelectIndex: (index: Int) -> Unit,
    defaultIndex: Int = 0,
    bottomWidth: Dp = R.dimen.d40.dimenToDp(),
    bottomBgColor: Color = R.color.gray_D4.toComposeColor(),
    bottomCornerRadius: Dp = bottomWidth / 2,
    bottomBorderOpen: Boolean = false,
    bottomBorderWidth: Dp = R.dimen.d1.dimenToDp(),
    bottomBorderColor: Color = bottomBgColor,

    selectedTextColor: Color = R.color.white.toComposeColor(),
    selectedTextSize: Dp = R.dimen.d14.dimenToDp(),
    selectedFontWeight: FontWeight = FontWeight.W500,
    unSelectedTextColor: Color = R.color.black_66.toComposeColor(),
    unSelectedTextSize: Dp = selectedTextSize,
    unSelectedFontWeight: FontWeight = FontWeight.W400,

    padding: Dp = R.dimen.d0.dimenToDp(),
    tabCountDirection: TabCountPosition = TabCountPosition.END,
    isShowZero: Boolean = true,

    slideBarWidth: Dp = (bottomWidth - padding * 2),
    slideBarHeight: Dp = R.dimen.d50.dimenToDp(),
    slideBarGapHeight: Dp = 0.dp,
    slideBarBgColor: Color = R.color.blue_2E76EE.toComposeColor(),
    slideBarCornerRadius: Dp = slideBarHeight / 2,

    slideBarBorderOpen: Boolean = false,
    slideBarBorderWidth: Dp = R.dimen.d1.dimenToDp(),
    slideBarBorderColor: Color = slideBarBgColor,
    onPerformClick: ((Int) -> Unit) -> Unit = {}//外部模拟点击使用
) {

    if (defaultIndex >= tabRowItems.size)
        throw Throwable("your defaultIndex $defaultIndex,tab count is ${tabRowItems.size}")

    val currentIndex = remember { mutableIntStateOf(defaultIndex) }
    val bottomHeight =
        slideBarHeight * tabRowItems.size + slideBarGapHeight * (tabRowItems.size - 1) + padding * 2

    //回调给外部
    val performClick: (Int) -> Unit = {
        currentIndex.intValue = it
        onSelectIndex(it)
    }
    onPerformClick(performClick)

    Box(
        modifier = Modifier.width(bottomWidth).height(bottomHeight)
            .background(
                color = bottomBgColor,
                shape = RoundedCornerShape(bottomCornerRadius)
            ).let {
                if (bottomBorderOpen) {
                    it.border(
                        width = bottomBorderWidth,
                        color = bottomBorderColor,
                        shape = RoundedCornerShape(bottomCornerRadius)
                    )
                } else {
                    it
                }
            }
            .padding(padding),
        contentAlignment = Alignment.TopCenter
    ) {

        //分情况
        if (bottomHeight.dpToPx() > ScreenUtils.getScreenHeight()) {//超宽

            val scrollState = rememberScrollState()
            //文字
            Column(
                modifier = Modifier.fillMaxSize().horizontalScroll(scrollState),
            ) {

                tabRowItems.forEachIndexed { index, item ->
                    val textColor = animateColorAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextColor
                        else
                            unSelectedTextColor,
                        label = "textColor"
                    )
                    val textSize = animateDpAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextSize
                        else
                            unSelectedTextSize,
                        label = "textSize"
                    ).value.dpToPx()

                    val fontWeight = if (currentIndex.intValue == index)
                        selectedFontWeight
                    else
                        unSelectedFontWeight

                    val selected = currentIndex.intValue == index

                    Box(
                        modifier = Modifier.fillMaxWidth().height(slideBarHeight)
                            .background(
                                color = if (selected) slideBarBgColor else R.color.transparent.toComposeColor(),
                                shape = RoundedCornerShape(slideBarCornerRadius)
                            ).let {
                                //必须使用let进行处理
                                if (slideBarBorderOpen) {
                                    it.border(
                                        width = slideBarBorderWidth,
                                        color = if (selected) slideBarBorderColor else R.color.transparent.toComposeColor(),
                                        shape = RoundedCornerShape(slideBarCornerRadius)
                                    )
                                } else {
                                    it
                                }
                            }
                            .intervalClick(200) {
                                currentIndex.intValue = index
                                onSelectIndex(index)
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        val msg = item.count?.value?.let {

                            if (it > 0)
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> "$it ${item.title}"
                                    TabCountPosition.TOP -> "$it\n${item.title}"
                                    TabCountPosition.END -> "${item.title} $it"
                                    TabCountPosition.BOTTOM -> "${item.title}\n$it"
                                }
                            else {
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> if (isShowZero) "$it ${item.title}" else item.title
                                    TabCountPosition.TOP -> if (isShowZero) "$it\n${item.title}" else "\n${item.title}"
                                    TabCountPosition.END -> if (isShowZero) "${item.title} $it" else item.title
                                    TabCountPosition.BOTTOM -> if (isShowZero) "${item.title}\n$it" else "${item.title}\n"
                                }
                            }
                        } ?: item.title
                        Text(
                            text = msg,
                            color = textColor.value,
                            fontSize = textSize.pxToSp(),
                            fontWeight = fontWeight,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis,
                            textAlign = TextAlign.Center
                        )
                    }

                    //加间隔
                    if (index < tabRowItems.size - 1) {
                        VerticalSpace(slideBarGapHeight)
                    }
                }
            }
        } else {//不超宽
            //变动的圆形背景块
            val offsetY = animateDpAsState(
                targetValue = (slideBarHeight + slideBarGapHeight) * currentIndex.intValue,
                label = "offsetY"
            )

            Box(
                modifier = Modifier.width(slideBarWidth).height(slideBarHeight)
                    .offset(y = offsetY.value)
                    .background(
                        color = slideBarBgColor,
                        shape = RoundedCornerShape(slideBarCornerRadius)
                    ).let {
                        //必须使用let进行处理
                        if (slideBarBorderOpen) {
                            it.border(
                                width = slideBarBorderWidth,
                                color = slideBarBorderColor,
                                shape = RoundedCornerShape(slideBarCornerRadius)
                            )
                        } else {
                            it
                        }
                    }
            )

            //文字
            Column(
                modifier = Modifier.fillMaxSize(),
            ) {

                tabRowItems.forEachIndexed { index, item ->
                    val textColor = animateColorAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextColor
                        else
                            unSelectedTextColor,
                        label = "textColor"
                    )
                    val textSize = animateDpAsState(
                        targetValue = if (currentIndex.intValue == index)
                            selectedTextSize
                        else
                            unSelectedTextSize,
                        label = "textSize"
                    ).value.dpToPx()

                    val fontWeight = if (currentIndex.value == index)
                        selectedFontWeight
                    else
                        unSelectedFontWeight

                    Box(
                        modifier = Modifier.fillMaxWidth().height(slideBarHeight)
                            .intervalClick(200) {
                                currentIndex.intValue = index
                                onSelectIndex(index)
                            },
                        contentAlignment = Alignment.Center
                    ) {
                        val msg = item.count?.value?.let {

                            if (it > 0)
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> "$it ${item.title}"
                                    TabCountPosition.TOP -> "$it\n${item.title}"
                                    TabCountPosition.END -> "${item.title} $it"
                                    TabCountPosition.BOTTOM -> "${item.title}\n$it"
                                }
                            else {
                                when (tabCountDirection) {
                                    TabCountPosition.LEFT -> if (isShowZero) "$it ${item.title}" else item.title
                                    TabCountPosition.TOP -> if (isShowZero) "$it\n${item.title}" else "\n${item.title}"
                                    TabCountPosition.END -> if (isShowZero) "${item.title} $it" else item.title
                                    TabCountPosition.BOTTOM -> if (isShowZero) "${item.title}\n$it" else "${item.title}\n"
                                }
                            }
                        } ?: item.title
                        Text(
                            text = msg,
                            color = textColor.value,
                            fontSize = textSize.pxToSp(),
                            fontWeight = fontWeight,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis,
                            textAlign = TextAlign.Center
                        )
                    }

                    //加间隔
                    if (index < tabRowItems.size - 1) {
                        VerticalSpace(slideBarGapHeight)
                    }
                }
            }
        }
    }

    //外部默认defaultIndex变化，修改位置,如果定义回调函数了 就不需要使用了这种方式了
    LaunchedEffect(defaultIndex) {
        currentIndex.intValue = defaultIndex
    }
}